<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#map{
				width: 100vw;
				height: 100vh;
			}
		</style>
		
		<div id="map"></div>
		
		<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Gn2BW29tlQi2vjTfbQ6IbGGr5ztr2T5M"></script>
		<script>
			var map = new BMapGL.Map('map',{
				minZoom: 5,
				maxZoom: 20
			});
			// map.centerAndZoom(new BMapGL.Point(125.224948,49.166427),17);
			// map.enableScrollWheelZoom(true);
			// 三D视角
			// map.setHeading(64.5);
			// map.setTilt(50);
			// 比例尺控件
			var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
			map.addControl(scaleCtrl);
			
			var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
			map.addControl(zoomCtrl);
			
			var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
			map.addControl(navi3DCtrl);
			
			// 创建点
			// var marker = new BMapGL.Marker(new BMapGL.Point(125.224948,49.166427));
			// 创建⚪
			 // var circle = new BMapGL.Circle(point, 500, {
			 //        strokeColor: 'blue',
			 //        strokeWeight: 2,
			 //        strokeOpacity: 0.5
			 //    });
			// 添加⚪
			// function addOverlay(){
			// 	map.addOverlay(marker);
			// 	map.addOverlay(circle);
			// }
			// 创建点
			// var marker1 = new BMapGL.Marker(new BMapGL.Point(125.224948,49.166427));
			// map.addOverlay(marker1);
			var point = new BMapGL.Point(125.22773274708112,49.16671302448165);
			map.centerAndZoom(point, 18);
			
			// var marker = new BMapGL.Marker(point);  // 创建标注
			// map.addOverlay(marker);              // 将标注添加到地图中
			// var opts = {
			// 	width : 200,     // 信息窗口宽度
			// 	height: 100,     // 信息窗口高度
			// 	title : "宝宝" , // 信息窗口标题
			// 	message:"林业家园"
			// }
			// var infoWindow = new BMapGL.InfoWindow("地址：黑龙江省黑河市嫩江县林业家园", opts);  // 创建信息窗口对象 
			// marker.addEventListener("click", function(){          
			// 	map.openInfoWindow(infoWindow, point); //开启信息窗口
			// }); 
			
			 var circle = new BMapGL.Circle(point, 100, {
					fillColor:"#F0EDDD",
					fillOpacity: 1,
			        strokeColor: 'blue',
			        strokeWeight: 2,
			        strokeOpacity: 0.5
			    });
			map.addOverlay(circle);
			
			map.addEventListener('click', function (e) {
				// var point1 = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
				// console.log(point1);
				let point1 = [e.latlng.lng , e.latlng.lat];
				var a = map.getDistance({lng:125.22773274708112,lat:49.16671302448165},{lng:point1[0],lat:point1[1]});
				
				if(a <= 100){
					alert("在目标区域打卡");
				}else{
					alert("不在目标区域打卡");
				}
				
				
				
			});
			
			
			
			
		</script>
	</body>
</html>
